<!doctype html>
<html lang="zh-CN">
  <head>
    {% block title %}<title>本地图书馆</title>{% endblock %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <!-- 谷歌字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- AOS动画库 -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- 自定义CSS -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
  </head>

  <body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
      <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="{% url 'index' %}">
          <i class="fas fa-book-open me-2"></i> 本地图书馆
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="{% url 'index' %}">
                <i class="fas fa-home me-1"></i> 首页
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link {% if 'books' in request.path and 'my-favorites' not in request.path %}active{% endif %}" href="{% url 'books' %}">
                <i class="fas fa-book me-1"></i> 图书目录
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link {% if 'authors' in request.path %}active{% endif %}" href="{% url 'authors' %}">
                <i class="fas fa-feather me-1"></i> 作者列表
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link {% if 'ranking' in request.path %}active{% endif %}" href="{% url 'ranking' %}">
                <i class="fas fa-trophy me-1"></i> 排行榜
              </a>
            </li>
          </ul>
          
          <!-- 搜索框 -->
          <form class="d-flex mx-auto my-2 my-lg-0 search-form">
            <div class="input-group">
              <input class="form-control" type="search" placeholder="搜索书籍..." aria-label="搜索">
              <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
            </div>
          </form>
          
          <!-- 用户菜单 -->
          <ul class="navbar-nav">
            {% if user.is_authenticated %}
              <li class="nav-item">
                <a class="nav-link {% if 'my-favorites' in request.path %}active{% endif %}" href="{% url 'my-favorites' %}">
                  <i class="fas fa-heart me-1"></i> 我的收藏
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="fas fa-user-circle me-1"></i> {{ user.username }}
                </a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>我的资料</a></li>
                  <li><a class="dropdown-item" href="#"><i class="fas fa-history me-2"></i>借阅历史</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="{% url 'logout' %}?next={{ request.path }}"><i class="fas fa-sign-out-alt me-2"></i>退出</a></li>
                </ul>
              </li>
            {% else %}
              <li class="nav-item">
                <a class="nav-link" href="{% url 'login' %}?next={{ request.path }}">
                  <i class="fas fa-sign-in-alt me-1"></i> 登录
                </a>
              </li>
            {% endif %}
          </ul>
        </div>
      </div>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="py-5">
      <div class="container">
        {% block content %}{% endblock %}
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="mt-5">
      <div class="container">
        <div class="row gy-4">
          <div class="col-md-4">
            <h5 class="mb-3"><i class="fas fa-book-open me-2"></i>本地图书馆</h5>
            <p>我们致力于为您提供最好的阅读体验和知识分享平台，让阅读成为生活中不可或缺的一部分。</p>
            <div class="social-links">
              <a href="#" class="me-2"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="me-2"><i class="fab fa-twitter"></i></a>
              <a href="#" class="me-2"><i class="fab fa-instagram"></i></a>
              <a href="#" class="me-2"><i class="fab fa-weixin"></i></a>
              <a href="#" class="me-2"><i class="fab fa-weibo"></i></a>
            </div>
          </div>
          <div class="col-md-2">
            <h5 class="mb-3">快速链接</h5>
            <ul class="list-unstyled">
              <li><a href="{% url 'index' %}">首页</a></li>
              <li><a href="{% url 'books' %}">图书目录</a></li>
              <li><a href="{% url 'authors' %}">作者列表</a></li>
              <li><a href="{% url 'ranking' %}">排行榜</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <h5 class="mb-3">开放时间</h5>
            <ul class="list-unstyled">
              <li>周一至周五: 9:00 - 21:00</li>
              <li>周六: 10:00 - 20:00</li>
              <li>周日: 12:00 - 18:00</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h5 class="mb-3">联系我们</h5>
            <ul class="list-unstyled">
              <li><i class="fas fa-map-marker-alt me-2"></i>中国上海市闵行区东川路800号</li>
              <li><i class="fas fa-phone me-2"></i>(021) 5474-1000</li>
              <li><i class="fas fa-envelope me-2"></i>contact@locallibrary.com</li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="text-center py-3">
          <p>&copy; {% now "Y" %} 本地图书馆. 保留所有权利.</p>
        </div>
      </div>
    </footer>
    
    <!-- JavaScript库 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
      // 初始化AOS动画库
      document.addEventListener('DOMContentLoaded', function() {
        AOS.init({
          duration: 800,
          once: true
        });
      });
      
      // 激活当前导航菜单项
      document.addEventListener('DOMContentLoaded', function() {
        const currentPath = window.location.pathname;
        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
          if (link.getAttribute('href') === currentPath) {
            link.classList.add('active');
          }
        });
      });
    </script>
    
    {% block extra_js %}{% endblock %}
  </body>
</html>